<template>
  <el-form-item label="选项:" v-if="form.types === 3 ? false : true">
    <el-row
      type="flex"
      align="middle"
      style="margin-bottom: 20px"
      v-for="item in options"
      :key="item.code"
      ref="option"
    >
      <el-col :sm="1" :md="1">
        <!-- 单选框 -->
        <el-radio-group v-model="name" v-if="form.types === 1 ? true : false">
          <el-radio @change="handlerOne" :label="item.code">
            {{ item.code + ":" }}
          </el-radio>
        </el-radio-group>
        <!-- 多选 -->
        <el-checkbox-group
          v-model="nameList"
          v-if="form.types === 2 ? true : false"
        >
          <el-checkbox @change="handlerOne" :label="item.code">
            {{ item.code + ":" }}
          </el-checkbox>
        </el-checkbox-group>
      </el-col>

      <!-- 输入框 -->
      <el-col :span="4">
        <el-input @change="handlerOne" v-model="item.title"></el-input>
      </el-col>

      <!-- 上传图片 -->
      <el-col :span="20">
        <questions-uploadimage
          :code="item.code"
          @fileList="fileList"
          :item="item.img"
          :options="options"
          @delImg="item.img = ''"
        ></questions-uploadimage>
      </el-col>
    </el-row>

    <!-- 增加选项与答案 -->
    <el-button
      type="danger"
      :disabled="form.types === 1 ? true : false"
      @click="onAdd"
      >+增加选项与答案</el-button
    >
  </el-form-item>
</template>

<script>
import questionsUploadimage from './questions-uploadimage.vue'
export default {
  components: { questionsUploadimage },
  name: 'questionOption',
  props: ['form', 'optionsList'],
  data () {
    return {
      // 单选唯一值
      name: '',
      // 多选值列表
      nameList: [],
      // 固定的四个选项
      options: [
        {
          isRight: false,
          code: 'A',
          title: '',
          img: ''
        },
        {
          isRight: false,
          code: 'B ',
          title: '',
          img: ''
        },
        {
          isRight: false,
          code: 'C ',
          title: '',
          img: ''
        },
        {
          isRight: false,
          code: 'D ',
          title: '',
          img: ''
        }
      ]
    }
  },

  watch: {
    optionsList: function (newval) {
      if (newval) {
        newval.map((item) => {
          item.isRight = !!item.isRight
        })
        this.options = newval
        const right = this.options.filter((item) => item.isRight === true)
        if (right.length > 1) {
          right.forEach((item) => this.nameList.push(item.code))
        } else {
          this.name = right[0].code
        }
      }
    }
  },
  methods: {
    // 增加选项与答案按钮
    onAdd () {
      const res = this.options[this.options.length - 1]
      // ASCII码转换
      const num = res.code.charCodeAt()
      this.options.push({
        isRight: false,
        code: String.fromCodePoint(num + 1),
        title: '',
        img: ''
      })
    },
    // 单选多选监听
    handlerOne () {
      this.handler(this.options)
    },
    handler (newobj) {
      // 单选
      if (this.form.types === 1) {
        this.nameList = []
        newobj.find((item) => {
          item.isRight = false
          if (this.name === item.code) {
            item.isRight = true
          }
        })
        console.log(1)
        this.$emit('allOptions', this.options)
      }
      // 多选
      if (this.form.types === 2) {
        this.name = ''
        console.log(2)
        console.log(newobj)
        newobj.find((item1) => {
          console.log(item1.code)
          this.nameList.find((item2) => {
            console.log(item2)
            if (item1.code !== item2) {
              item1.isRight = false
            }
          })
        })
        newobj.find((item1) => {
          this.nameList.forEach((item2) => {
            if (item2 === item1.code) {
              item1.isRight = true
            }
          })
        })
        if (this.nameList.length === 0) {
          newobj.forEach((item) => (item.isRight = false))
        }
        this.$emit('allOptions', this.options)
      }
    },
    // 图片上传
    fileList (file) {
      console.log(file)
      file.forEach((item1) => {
        this.options.forEach((item2) => {
          if (item1.code === item2.code) {
            item2.img = item1.url
          }
        })
      })
    }
  }
}
</script>
